<template>
  <div class="_wz_beidouManagementDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">基本信息</td>
      </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
      </colgroup>
      <tbody>
      <tr>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">登记编号</td>
        <td style="border-top: 0px;">{{ !!formData.terminalNumber ? formData.terminalNumber : "--" }}</td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">车牌号</td>
        <td style="border-top: 0px;">{{!!formData.terminalVehiclePlateNo ? formData.terminalVehiclePlateNo : "--" }}</td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">车架号</td>
        <td style="border-top: 0px;">{{!!formData.terminalVehicleFrameNo ? formData.terminalVehicleFrameNo : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车辆类型</td>
        <td>{{!!formData.terminalVehicleType ? formData.terminalVehicleType : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">车辆型号</td>
        <td>{{!!formData.terminalVehicleModel ? formData.terminalVehicleModel : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">车辆品牌</td>
        <td>{{!!formData.terminalVehicleBrand ? formData.terminalVehicleBrand : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">初登日期</td>
        <td>{{!!formData.terminalVehicleIssueDate ? formData.terminalVehicleIssueDate : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">经营企业</td>
        <td colspan="3">{{ !!formData.deptName ? formData.deptName : "--" }}</td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">北斗信息</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车主业户</td>
        <td>{{!!formData.terminalVehicleOwnerName ? formData.terminalVehicleOwnerName : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">联系电话</td>
        <td>{{!!formData.terminalVehicleOwnerPhone ? formData.terminalVehicleOwnerPhone : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">登记人</td>
        <td>{{!!formData.terminalRegistrantName ? formData.terminalRegistrantName : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">入网公司</td>
        <td>{{!!formData.terminalCompanyValue ? formData.terminalCompanyValue : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">办理日期</td>
        <td>{{ !!formData.terminalDate ? formData.terminalDate : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">到期日期</td>
        <td>{{!!formData.terminalExpireDate ? formData.terminalExpireDate : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">北斗净费</td>
        <td>{{ !!formData.terminalNetFee ? formData.terminalNetFee : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">北斗全费</td>
        <td>{{ !!formData.terminalFullFee ? formData.terminalFullFee : "--" }}</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">提醒天数</td>
        <td>{{!!formData.terminalRemindDay ? formData.terminalRemindDay : "--" }}</td>
        <td style="text-align: right;font-weight: 600;">提醒日期</td>
        <td>{{!!formData.terminalRemindDate ? formData.terminalRemindDate : "--"}}</td>
        <td style="text-align: right;font-weight: 600;">提醒状态</td>
        <td>{{ formData.terminalWhetherRemind ? "开启" : "关闭" }}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">北斗资料</td>
        <td colspan="5">
          <div style="min-height:50px;">
            <div style="width: 195px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="(item, index) in formData.imgEntityList">
              <div class="demo-upload-list">
                <Image :src="!!item.terminalImgUrl ? apiUrl.imgUrl + item.terminalImgUrl : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item.terminalImgUrl ? apiUrl.imgUrl + item.terminalImgUrl : 'img/zwtpxd.png']" />
              </div>
              <div style="line-height: 30px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;height: 30px;background: #f3f3f3;border-radius: 4px;">{{ item.terminalImgDescribe }}</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">备注</td>
        <td colspan="5" style="min-height:50px;padding:5px 10px;">{{ !!formData.terminalRemark ? formData.terminalRemark : "--" }}</td>
      </tr>
      </tbody>
    </table>

    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import wzTbale from "../../../components/table/index.vue";
//reactive
export default defineComponent({
  name: 'beidouManagementDetails',//组件名称
  components: {
    wzTbale,
  },//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      spinShow: false, //本页加载
      formData: {},//培训数据


    });

    //加载数据
    const loadData = ()=>{
      state.spinShow = true;
      $axios.post(apiUrl.managementTerminalTerminalInfo,{uuid:props.selectData.uuid}).then((res) => {
        state.spinShow = false;
        if(!!res.data){
          state.formData = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })

    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      state.formData = props.selectData
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
    }
  }
})


</script>
<style lang="less">

._wz_beidouManagementDetails {

  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 195px;
    height: 140px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 0 0 0;

    img {
      min-height: 10%;
      max-height: 90%;
      min-width: 10%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
